<template>
    <div class="navbar">
        <div class="div1">
            <van-icon @click="$router.go(-1)" name="arrow-left"/>
        </div>
        <div class="search-section">
            <van-search class="search-input" shape="round" show-action v-model="value" placeholder="请输入搜索关键词"
                        @search="onSearch">
                <template #action>
                    <div @click="selectClick">
                        <van-icon name="arrow-down"/>
                    </div>
                </template>
            </van-search>
            <van-action-sheet v-model="big_active" cancel-text="取消" :actions="big_genre"
                              @select="selectChange"/>
        </div>
        <div class="div3">
            <img :src="image" v-if="image">
            <img src="../../assets/default_img.jpg" v-else>
            <div class="email">
                <span class="iconfont icon-fankui" @click="$router.push({path:'/message'})"></span>
                <span class="email-num" v-if="likeCheck+totalCheck>0">{{totalCheck+likeCheck}}</span>
            </div>
            <p @click="$router.push('/userinfo/'+new Date().getTime())">个人中心</p>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "navbar",
        computed: {
            ...mapState(['totalCheck', 'likeCheck'])
        }, data() {
            return {
                value: "",
                image: "",
                big_active: false,
                big_genre: [{name: '小说'}, {name: '电影/电视剧/动漫'}],
                active_genre: "",
                isRouterAlive: true
            }
        },
        mounted: function () {
            this.image = JSON.parse(localStorage.getItem("user")).img
        },
        methods: {
            selectChange(data) {
                this.active_genre = data.name
                this.big_active = false;
            },
            selectClick() {
                this.big_active = true;
            },
            onSearch() {
                this.$router.push({
                    path: "/searchResult/" + this.value,
                    query: {wd: this.value, active_genre: this.active_genre}
                })
            },
            onCancel() {
                this.value = ""
            },
        },
        watch: {
            '$route': function (to, from) {
                console.log(to.name)
                this.image = JSON.parse(localStorage.getItem("user")).img
            }
        }
    }
</script>

<style lang="scss">
    .navbar {
        padding: 0;
        display: flex;
        align-items: center;

        .div1 {
            margin: 0 1.26vw;
        }

        .search-section {
            flex-grow: 1;
            width: 55%;

            .search-input {
                padding: 0;
            }
        }

        .div3 {
            justify-content: space-between;
            flex-grow: 2;
            display: flex;
            align-items: center;

            img {
                width: 25px;
                height: 25px;
            }

            .email {
                .icon-fankui {
                    font-size: 7.5625vw;
                }

                .email-num {
                    position: absolute;
                    font-size: 2px;
                    right: 17.8%;
                    top: 2.4vw;
                    padding: 1px;
                    color: white;
                    text-align: center;
                    background: red;
                    width: 11px;
                    line-height: 12px;
                    height: 11px;
                    border-radius: 50%;
                }
            }

            p {
                color: #7a7a7a;
                background: rgba(255, 122, 155, 0.8);
                padding: 1.104vw;
                border-radius: 1.625vw;
                font-size: 1.56vw;
                margin-right: 1.08vw;
            }
        }
    }
</style>